<script setup>
import {Lock, User} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import router from "@/router/index.js";
import {login} from "@/net/index.js";

const logining = ref(false);
const formRef = ref()

// 表单数据
const loginForm = reactive({
    userAccount: '',
    userPassword: '',
    remember: false,
    type: '0'
});

// 表单提示
const rules = ref({
    userAccount: [{required: true, message: '请输入用户名', trigger: 'blur'}],
    userPassword: [{required: true, message: '请输入密码', trigger: 'blur'}]
});

// 单击登录
const handleSubmit = () => {
    formRef.value.validate((isValid) => {
        if(isValid) {
            login(loginForm.userAccount, loginForm.userPassword, loginForm.remember, () => router.push("/apiShop"))
        }
    });
}

</script>

<template>
    <!--登录表单-->
    <div class="login-container">
        <el-form :model="loginForm" :rules="rules" status-icon
                 ref="formRef"
                 label-position="left"
                 label-width="0px"
                 class="login-page">
            <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center">
                <div style="width: 30%;height: 100px">
                    <svg t="1706660403257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12492" width="100" height="100"><path d="M534.1 207.332c39.1-39.1 90.3-58.6 141.5-58.6 39.2 0 78.4 11.4 112.1 34.3l76.1-76.1c1.6-1.5 3.6-2.3 5.7-2.3s4.1 0.7 5.7 2.3l42.4 42.4c3.1 3.1 3.1 8.2 0 11.4l-76.1 76.1c52.7 77.8 44.6 184.5-24.3 253.5l-101.9 101.9c-1.6 1.5-3.7 2.3-5.7 2.3-2.1 0-4.1-0.7-5.7-2.3l-271.7-271.7c-3.1-3.1-3.1-8.2 0-11.3z m-225.6 225.5c1.6-1.5 3.7-2.3 5.7-2.3 1.156 0 2.282 0.212 3.327 0.67l-0.031 0.034 276.02 276.02c1.065 2.848 0.46 6.2-1.816 8.476l-101.9 101.9c-39.1 39.1-90.3 58.6-141.5 58.6-39.2 0-78.4-11.4-112.1-34.3l-76.1 76.1c-1.6 1.5-3.6 2.3-5.7 2.3s-4.1-0.7-5.7-2.3l-42.4-42.4c-3.1-3.1-3.1-8.2 0-11.3l76.1-76.1c-52.7-77.8-44.6-184.5 24.3-253.5z m273.7-177.4l-59.4 59.4 186.8 186.8 59.4-59.4c24.9-25 38.7-58.1 38.7-93.4 0-35.3-13.8-68.5-38.7-93.4-25-25-58.1-38.7-93.4-38.7-35.3 0-68.5 13.8-93.4 38.7z m-268 268l-59.4 59.4c-25 25-38.7 58.1-38.7 93.4 0 35.3 13.8 68.5 38.7 93.4 25 25 58.1 38.7 93.4 38.7 35.3 0 68.5-13.8 93.4-38.7l59.4-59.4-186.8-186.8z" fill="#1C6EFF" p-id="12493"></path><path d="M567.811 548.615a8 8 0 0 1 11.314 0l33.941 33.941a8 8 0 0 1 0 11.314l-66.468 66.468-45.255-45.255 66.468-66.468zM429.22 410.022a8 8 0 0 1 11.313 0l33.941 33.942a8 8 0 0 1 0 11.313l-66.468 66.468-45.255-45.255 66.469-66.468z" fill="#44D7B6" p-id="12494"></path></svg>
                </div>
                <div style="width: 60%;height: 60px;display: flex;flex-direction: column;justify-content: center;align-items: center">
                    <span style="display: block;font-size: 35px;font-family: Sphere fez">VK-API</span>
                    <span style="display: block;font-size: 15px;font-weight: lighter;margin-top: 5px">重新定义API的使用方式</span>
                </div>
            </div>
            <el-divider style="margin: 10px 0" />
            <h2 class="title" style="color: #409EFF;margin-bottom: 10px;font-size: 30px">登录</h2>
            <el-form-item prop="userAccount">
                <el-input type="text"
                          v-model="loginForm.userAccount"
                          size="large"
                          placeholder="用户名"
                          :prefix-icon="User"
                ></el-input>
            </el-form-item>
            <el-form-item prop="userPassword">
                <el-input type="password"
                          v-model="loginForm.userPassword"
                          size="large"
                          placeholder="密码"
                          :show-password="true"
                          :prefix-icon="Lock"
                ></el-input>
            </el-form-item>
            <el-form-item prop="remember">
                <el-checkbox v-model="loginForm.remember" label="记住我"/>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;height: 40px;font-size: 16px" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
            <el-divider>
                <span style="color: grey;font-size: 13px">没有账号</span>
            </el-divider>
            <el-form-item style="width:100%;">
                <el-button type="success" style="width:100%;height: 40px;font-size: 16px" @click="router.push('/register')" :loading="logining">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
}

.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    //border: 1px solid #eaeaea;
    //box-shadow: 0 0 25px #cac6c6;
}
</style>